<template>
	<view class="header">
		<view class="search">
			<view class="search-left">
				<search></search>
			</view>
			<view class="search-right">
				<image src="../../static/message-icon.png" mode=""></image>
			</view>
		</view>
		<view class="nav">
			<view class="nav-item">
				<view class="nav-item-image">
					<image src="../../static/nav-icon.png"></image>
				</view>
				<span>遛狗</span>
			</view>
		</view>
	</view>
</template>

<script>
import searchVue from '../../component/search/search.vue'
	export default {
		components:{
			"search":searchVue
		},
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
.header{
	padding: 15rpx 32rpx;
	background-color: #F2F3F5;
	.search{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
		.search-left{
			width: calc(100% - 150rpx);
		}
		.search-right{
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(29, 33, 41, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx;
			box-sizing: border-box;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 40rpx;
		border: 1px solid rgba(29, 33, 41, 1);
		border-radius: 24rpx;
		.nav-item{
			.nav-item-image{
				background: linear-gradient(160.05deg, rgba(3, 133, 255, 1) 0%, rgba(128, 193, 255, 1) 100%), rgba(255, 255, 255, 1);
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				padding: 20rpx;
				box-sizing: border-box;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
